<template>
	<el-container>
		<!-- <el-header>
			<el-form :model="searchmodel" :inline="true" class="demo-form-inline" style="width: 70%; float: left;">
				<el-form-item label="ISBN">
					<el-input placeholder="ISBN" v-model="searchmodel.isbn" @input="change($event)"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input placeholder="借阅人姓名" v-model="searchmodel.isbn" @input="change($event)"></el-input>
				</el-form-item>

				<el-form-item label="书名">
					<el-input placeholder="读书名称" v-model="searchmodel.title" @input="change($event)"></el-input>
				</el-form-item>
				 <el-form-item label="读书状态">
					<el-select v-model="searchmodel.age" placeholder="请选择状态">
						<el-option label="在馆" value="0"></el-option>
						<el-option label="外借" value="1"></el-option>
					</el-select>
				</el-form-item>  
				<el-form-item>
					<el-button type="primary" @click="getBooks()" icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form>
			<div style="float: right;">
				<el-button type="success" icon="el-icon-circle-plus" @click="addBook()"></el-button>
			</div>
		</el-header> -->
		<el-main style="padding: unset;">
			<el-table :max-height="tableHeight" :data="lendmodel" border>
				<el-table-column prop="user" label="头像">
					<template slot-scope="scope">
						<img height="100" width="100" v-if="!scope.headerPath" src="~@/assets/logo.png"
							alt="electron-vue" />
						<img height="100" width="100" v-if="scope.headerPath" src="scope.headerPath"
							alt="electron-vue" />
					</template>
				</el-table-column>
				<el-table-column prop="user.nuber" label="学号">
				</el-table-column>
				<el-table-column prop="user.name" label="姓名">
				</el-table-column>
				<el-table-column prop="books" label="在借读书" width="441">
					<template slot-scope="scope">
						<div>
							<div v-for="book in scope" class="block" style="width: 105px;float:left">
								<span class="demonstration">{{book.title}}</span>
								<!-- <el-image style="width: 100px; height: 100px" :src="book.cover" :fit="book.isbn">
								</el-image> -->
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="借阅时间">
				</el-table-column>
				<el-table-column prop="returnTime" label="归还时间">
				</el-table-column>
				<el-table-column prop="state" label="状态">
				</el-table-column>
				<!-- 
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						 <el-popover
						    placement="top-start"
						    title="标题"
						    width="200"
						    trigger="hover"
						    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
						    <el-button slot="reference">hover 激活</el-button>
						  </el-popover>
					</template>
				</el-table-column> -->
			</el-table>
		</el-main>

	</el-container>
</template>

<script>
	export default {
		name: 'Lend-page',
		data() {
			return {
				pageSize: 99999,
				currentPage: 0,
				dialogTitle: '添加读书',
				/*delete dailog*/
				delDialogVisible: false,
				/*upload*/
				imageUrl: '',
				formLabelWidth: '120px',
				dialogFormVisible: false,
				tableHeight: 800, //document.body.clientHeight - 120,
				lendmodel: [{
					id: '',
					createTime: '',
					books: [],
					user: {},
					state: 'lend',
					returnTime: ''
				}]
			}
		},
		created: function() {
			console.log()
			this.getBooks()
		},
		methods: {
			formatCreateTime(row, column) {
				return row.createTime = this.commonFunction.timestampToTime(row.createTime);
			},
			formatReturnTime(row, column) {
				return row.createTime = this.commonFunction.timestampToTime(row.returnTime);
			},
			getBooks() {
				var _self = this
				// var regexp =new RegExp(_self.searchmodel.isbn,"i");
				// var regexpNumber =new RegExp(_self.searchmodel.title,"i");
				var filter = {
					// $and:[
					// 	{isbn:{$regex:regexp}},
					// 	{title:{$regex:regexpNumber}}]
				}
				this.$LendDatastore.find(filter).skip(this.currentPage * this.pageSize).limit(this.pageSize).exec(function(
					err, docs) {
					console.log(docs)
					for (var i = 0; i < docs.length; i++) {
						docs[i].createTime = _self.commonFunction.timestampToTime(docs[i].createTime)
						docs[i].returnTime = _self.commonFunction.timestampToTime(docs[i].returnTime)
					}
					_self.lendmodel = docs

				})
			},
			/*upload*/
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			/*delete dialog*/
			open2() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},
		watch: {
			tableHeight(val) {
				console.log('sdfasdf')
				// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
				if (!this.timer) {
					// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
					this.tableHeight = val
					console.log("kkkkk" + val)
					this.timer = true
					let that = this
					setTimeout(function() {
						// 打印screenWidth变化的值
						console.log(that.tableHeight)
						that.timer = false
					}, 400)
				}
			}
		},
		mounted() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.screenHeight = document.body.clientHeight
					that.tableHeight = window.screenHeight - 180
				})()
			}
		}
	}
</script>

<style scoped="scoped">
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {

		color: #99a9bf;
	}

	.demo-table-expand .el-form-item label {
		width: 100% !important;
		font-size: 20px !important;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.dialog-form .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	/* upload */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 170px;
		height: 170px;
		line-height: 170px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
	}

	.avatar {
		width: 170px;
		height: 170px;
		display: block;
	}
</style>
